<template>
  <div class="table-main">
    <el-table
      ref="table"
      :data="tableData"
      header-align="center"
      :header-cell-style="{ background: '#F7F8FA', color: '#323233' }"
      :cell-style="{ color: '#323233' }"
      element-loading-text="拼命加载中"
      v-loading="loading"
      @selection-change="handleSelectionChange"
      @sort-change="sortChange"
      v-bind="$attrs"
    >
      <slot name="table"></slot>
    </el-table>
    <div class="paginationRow" v-if="pageshow">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(pageData.current)"
        :page-sizes="pageSizes"
        :page-size="Number(size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(pageData.total)"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    handleSelectionChange: {
      type: Function,
      default() {}
    },
    pageData: {
      type: null,
      default() {
        return {}
      }
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    pageshow: {
      type: Boolean,
      default: true
    },
    pageSizes: {
      type: Array,
      default() {
        return [20, 50, 100, 200, 500]
      }
    },
    loading:{
      type: Boolean,
      default() {
        return false
      }
    },
    size: {
      type: String,
      default() {
        return '20'
      }
    }
  },
  data() {
    return {
      pagination: {
        page: 1,
        total: null,
        limit: 20
      }
    }
  },
  watch: {
    tableData() {
      this.loading = false
    }
  },
  methods: {
    //排序
    sortChange(val) {
      this.$emit('sortChange', val)
    },
    handleSizeChange(val) {
      this.pagination.limit = val
      this.$emit('pageChange', this.pagination)
      // if (this.autoScroll) {
      //   scrollTo(0, 800)
      // }
    },
    handleCurrentChange(val) {
      this.pagination.page = val
      this.$emit('pageChange', this.pagination)
      // if (this.autoScroll) {
      //   scrollTo(0, 800)
      // }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped>
.table-main {
  background: #fff;
  margin-top: 15px;
  .el-table th {
    text-align: center;
  }
  .el-table {
    margin-bottom: 20px;
    td {
      text-align: center;
    }
  }
}
.paginationRow {
  position: relative;
  text-align: right;
  color: #323233;
  font-size: 14px;
  .page {
    text-align: right;
    padding: 10px;
  }
  .goodsTotal {
    position: absolute;
    top: 18px;
    left: 10px;
  }
}
</style>
